import "../../css/help.css";
import HelpSibar from "@root/P/components/HelpSibar";
import REST from "@module/Rest";
import Pagination from '@ui/RJMart/pagination'
import CommonUtils from "pages/ruijing/common/utils/CommonUtils";
import ZenUI from "@root/components/zenUi/ZenUI";
function HelpProblems(props) {

    //初始化插件入参
    const {} = props;
    const params = $state.params;
    console.log("HelpProblems",$state);
    let columnType = 0;
    let orgId = Uts.getCookie("orgId");
    let suppId = Uts.getCookie("suppId");

    //初始化插件状态值及状态更新方法
    const [helpProblemsStatus, updatehelpProblemsStatus] = usePartState({
        isColumnList:true,
        columnList:[],
        articleContent:{},
        pageNo:1,
        pageSize:10,
        totalItems:0,
        selectedColumnName:"",
        selectedColumnId: params.columnId,
        selectedArticleId: params.articleId,
        articleTitle:"",
        articleContent:"",
        publishTime: params.publishTime,
        targetType: params.targetType,
        search:params.search!=undefined?params.search:"",
        defaultColumn:""
    })

    let columnInput = {
        currentPage:1,
        columnId:helpProblemsStatus.selectedColumnId,
        pageSize:helpProblemsStatus.pageSize,
    }

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...helpProblemsStatus, ...value };
        console.log(newValue);
        updatehelpProblemsStatus(newValue);
    }

    //更新列表文章外部接口
    function updateFunctions(param1,param2,param3,param4,param5,param6){
        console.log("updateFunctions",param3);
        _updateData(
            (helpProblemsStatus.columnList = param1),
            (helpProblemsStatus.selectedColumnId = param2),
            (helpProblemsStatus.selectedColumnName = param3),
            (helpProblemsStatus.pageNo = param4.currentPage),
            (helpProblemsStatus.totalItems = param4.total),
            (helpProblemsStatus.isColumnList = param5),
            (helpProblemsStatus.targetType = param6)
        )
    }

    //更新选中的menu外部接口
    function updateMenuFunctions(selectedColumnId,selectedColumnName){
        console.log("updateMenuFunctions",selectedColumnName);
        _updateData(
            (helpProblemsStatus.selectedColumnId = selectedColumnId),
            (helpProblemsStatus.selectedColumnName = selectedColumnName)
        )
    }

    //更新文章内容外部接口
    function updateArticleFunctions(articleTitle,articleContent,publishTime,iscolumnList){
        _updateData(
            (helpProblemsStatus.articleTitle = articleTitle),
            (helpProblemsStatus.articleContent = articleContent),
            (helpProblemsStatus.publishTime = publishTime),
            (helpProblemsStatus.isColumnList = iscolumnList)
        )
    }

    //更新搜索内容外部接口
    function updateSearchFunctions(search){
        console.log("updateMenuFunctions",search);
        _updateData(
            (helpProblemsStatus.search = search)
        )
    }

    //更新默认选中的tab
    function updateDefaultColumn(columnName){
        console.log("updateDefaultColumn",columnName);
        _updateData(
            (helpProblemsStatus.defaultColumn = columnName)
        )
    }

    //更新链接入参外部接口
    function updateParamFunctions(selectedArticleId,selectedColumnId,publishTime,targetType,search){
        _updateData(
            (helpProblemsStatus.selectedArticleId = selectedArticleId),
            (helpProblemsStatus.selectedColumnId = selectedColumnId),
            (helpProblemsStatus.publishTime = publishTime),
            (helpProblemsStatus.targetType = targetType),
            (helpProblemsStatus.search = search)
        )
    }

    //获取栏目列表数据
    function getColumnData(inputData,selectedColumnId,selectedColumnName){
        let url = "/cms/notice/getOnlinesByColumnAndType";
        if($state.params.search!=""&&$state.params.search!=undefined){
            inputData.title = $state.params.search;
            delete inputData.columnId;
        }else{
            delete inputData.title;
        }
        if(inputData.columnId =="0"){
            delete  inputData.columnId;
        }
        REST.post(url,inputData).then(
            data => {
                if (data.msg == "操作成功"||data.resultCode=="0000") {
                    let loadData = data.entities.concat();
                    console.log("getColumnData",loadData);
                    let page = {};
                    page.currentPage = data.currentPage;
                    page.total = data.total;
                    if(inputData.hasOwnProperty("title")&&inputData.title!=undefined){
                        selectedColumnName = "关于‘"+inputData.title+"’的搜索结果：";
                    }
                    console.log("getColumnData",selectedColumnName,helpProblemsStatus.columnList)
                    updateFunctions(loadData,selectedColumnId,selectedColumnName,page,true,1);
                }else{
                    ZenUI.ST(data.msg, 2);
                }
            },
            error => {}
        );
    }

    //获取所选取文章内容
    function getArticleContent(columnId,publishTime){
        let url = "/cms/notice/detail/"+columnId;
        REST.get(url,{}).then(
            data => {
                if (data.msg == "操作成功"||data.resultCode=="0000") {
                    let imgReg = /<img.*?(?:>|\/>)/gi;
                    let styleReg = /style=[\'\"]?([^\'\"]*)[\'\"]?/i;
                    let imgArr = data.content.match(imgReg);
                    imgArr&&imgArr.map((item,index) =>{
                        let imgStyle = item.match(styleReg);
                        let itemWidth = -1;
                        let itemHeight = -1;
                        let newItem = ""
                        if(imgStyle!=null&&imgStyle.length>0){
                            let itemStyle = imgStyle[0].toString().replace("style=","").replace('"',"").split("; ");
                            if(itemStyle!=null&&itemStyle.length>0){
                                itemStyle&&itemStyle.map((style,styleIndex) => {
                                    if(style.indexOf("width")>-1){
                                        itemWidth = parseFloat(style.split(":")[1].replace("px",""));
                                    }else if(style.indexOf("height")>-1){
                                        itemHeight = parseFloat(style.split(":")[1].replace("px",""));
                                    }
                                })
                            }
                        }
                        if(itemWidth!=-1&&itemHeight!=-1){
                            if(itemWidth>800){
                                itemHeight = itemHeight*800/(itemWidth);
                                itemWidth = 800;
                            }
                            let newStyle = 'style="height:'+itemHeight+'px; width:'+itemWidth+'px"';
                            console.log("newStyle",newStyle,item.indexOf(imgStyle[0].toString()));
                            console.log(item.substring(1,item.indexOf(imgStyle[0].toString())));
                            console.log(item.substring(item.indexOf(imgStyle[0].toString())+imgStyle[0].toString().length))
                            //item.replace(imgStyle[0].toString(),"");
                            newItem = item.substring(0,item.indexOf(imgStyle[0].toString())) + newStyle + item.substring(item.indexOf(imgStyle[0].toString())+imgStyle[0].toString().length);
                            data.content = data.content.substring(0,data.content.indexOf(item)) + newItem + data.content.substring(data.content.indexOf(item)+item.length);
                        }
                        //data.content = data.content.substring(0,data.content.indexOf(item))+"<div style='width:800px;overflow-x:auto'>"+item+"</div>"+data.content.substring(data.content.indexOf(item)+item.length);
                    })
                    updateArticleFunctions(data.title,data.content,publishTime,false)
                }else{
                    ZenUI.ST(data.msg, 2);
                }
            },
            error => {}
        );
    }

    //栏目文章列表分页变动
    function paginationChange(page){
        console.log("paginationChange",page);
        columnInput.currentPage = page;
        columnInput.columnId = helpProblemsStatus.selectedColumnId;
        columnInput.columnType = columnType;
        getColumnData(columnInput,helpProblemsStatus.selectedColumnId,helpProblemsStatus.selectedColumnName)
    }

    //栏目文章列表选择变动
    function selectedArticleChange(id,time){
        console.log("selectedColumnChange",id,time);
        //getArticleContent(id,time)
        $state.go({
            stateName: "/HelpProblems",
            params: {
                columnId:helpProblemsStatus.selectedColumnId,
                articleId:id,
                targetType:2,
                publishTime:time,
                search:""
            }
        })
    }

    //检查当前url入参是否发生变化
    function checkParam(){
        //if(!($state.params.columnId==helpProblemsStatus.selectedColumnId&&$state.params.articleId==helpProblemsStatus.selectedArticleId&&$state.params.targetType==helpProblemsStatus.targetType&&$state.params.publishTime==helpProblemsStatus.publishTime&&($state.params.search==helpProblemsStatus.search))){
        if(orgId&&orgId!=undefined&&orgId!=""){
            columnType = 3;
        }else if(suppId&&suppId!=undefined&&suppId!=""){
            columnType = 4;
        }else{
            columnType = 2
        }
        //columnType = 0; //测试
        columnInput.columnType = columnType;
        if($state.params.search!=helpProblemsStatus.search&&$state.params.columnId==0) {
            columnInput.columnId = $state.params.columnId;
            getColumnData(columnInput, $state.params.columnId, helpProblemsStatus.selectedColumnName)
            updateSearchFunctions($state.params.search);
        }else if($state.params.columnId!=helpProblemsStatus.selectedColumnId){
            columnInput.columnId = $state.params.columnId;
            getColumnData(columnInput, $state.params.columnId, localStorage.getItem("selectedColumn"))
            //updateSearchFunctions($state.params.search);
        }else if($state.params.targetType != helpProblemsStatus.targetType){
            if($state.params.targetType==2){
                getArticleContent($state.params.articleId,$state.params.publishTime);
                _updateData(
                    (helpProblemsStatus.targetType = $state.params.targetType)
                )
            }
        }else{
            console.log("checkParam",$state.params,helpProblemsStatus);
        }
    }

    console.log("beforeCheckParam",$state.params,helpProblemsStatus);
    checkParam();

    //componentOnMount
    React.useEffect(() => {
        console.log("refresh view");
        console.log(helpProblemsStatus);
        console.log("commonHeaderConfig",StateApi.getStoreState("commonHeaderConfig"));
        if(orgId&&orgId!=undefined&&orgId!=""){
            columnType = 3;
        }else if(suppId&&suppId!=undefined&&suppId!=""){
            columnType = 4;
        }else{
            columnType = 2
        }
        //columnType = 0; //测试
        columnInput.columnType = columnType;
        if($state.params.targetType == 1){
            columnInput.columnId = $state.params.columnId;
            getColumnData(columnInput, $state.params.columnId, localStorage.getItem("selectedColumn"));
        }else if($state.params.targetType == 2){
            //selectedArticleChange($state.params.articleId,$state.params.publishTime)
            getArticleContent($state.params.articleId,$state.params.publishTime);
        }

    },[]);

    return (
        <div className="zen_w-p100 zen_p-b-50" style={{backgroundColor:"#F0F5F8"}}>
                <div className="zen_w-1200 zen_center zen_p-t-30">
                    <HelpSibar columntype={columnType} updateproblemslist={getColumnData}
                               selectcolumn={helpProblemsStatus.selectedColumnId}
                               targettype={helpProblemsStatus.targetType}/>
                    {helpProblemsStatus.isColumnList ?
                        helpProblemsStatus.columnList && helpProblemsStatus.columnList.length > 0 ?
                        <div className="zen_il-bl zen_w-p75 zen_bg-FFFFFF zen_m-b-30 zen_of-a" style={{
                            marginLeft: "1%",
                            minHeight: "700px"
                        }}>
                            <div
                                className="zen_p-5 zen_bold  zen_m-30 zen_m-b-20 zen_0093EB zen_fs-20">{helpProblemsStatus.selectedColumnName}</div>
                            <ul className="zen_p-10" style={{"listStyleType": "disc", "listStylePosition": "inside"}}>
                                {helpProblemsStatus.columnList.map((item, index) => {
                                    return <li
                                        className="zen_m-l-30 zen_m-r-30 zen_p-t-20 zen_p-b-20 zen_p-l-5 zen_p-r-5 zen_cur-p"
                                        style={{borderBottom: "1px solid #eee"}} key={item.id}
                                        onClick={() => selectedArticleChange(item.id, item.publishTime)}>
                                        <div className="zen_il-bl zen_fs-14">{item.title}</div>
                                        <div
                                            className="zen_il-bl zen_f-right zen_969696 zen_fs-14">{CommonUtils.getDateStr(item.publishTime)}</div>
                                    </li>
                                })}
                            </ul>
                            {helpProblemsStatus.columnList.length > 0 ? <div className={'footer-pagination'}>
                                <Pagination
                                    onChange={(page) => paginationChange(page)}
                                    current={helpProblemsStatus.pageNo}
                                    pageSize={helpProblemsStatus.pageSize}
                                    total={helpProblemsStatus.totalItems}
                                />
                            </div> : ""}
                        </div> :
                            <div className="zen_il-bl zen_w-p75 zen_bg-FFFFFF zen_m-b-30 zen_of-a zen_text zen_t-c zen_fs-20" style={{minHeight:"700px",marginLeft: "1%",}}>
                        <h3 style={{lineHeight:"700px"}}>暂未找到相关信息哦～</h3>
                        </div>
                    :
                        <div className="zen_il-bl zen_w-p75 zen_bg-FFFFFF zen_m-b-30 zen_p-30 zen_of-a" style={{
                            marginLeft: "1%",
                            minHeight: "700px"
                        }}>
                            <div>
                                <h3 className="zen_t-l zen_fs-28 zen_l-h-40 zen_3C3C3C zen_bold zen_fs-20"
                                    style={{}}>{helpProblemsStatus.articleTitle}</h3>
                                <div className="zen_t-l zen_fs-14 zen_l-h-30 zen_969696"
                                     style={{}}>更新时间：{CommonUtils.getMinuteStr(helpProblemsStatus.publishTime)}</div>
                            </div>
                            <div className="zen_l-h-30 zen_fs-16 zen_646464" style={{textIndent: "2em"}}
                                 dangerouslySetInnerHTML={{__html: helpProblemsStatus.articleContent}}>
                            </div>
                        </div>
                    }
                </div>
        </div>
    )
}

export default HelpProblems;